<template>
  <div class="content-box main_center">
    <div class="content-title-box">
      <div class="title-box title-box-left">
        <span class="icon">●</span>
        <span class="title">
          <span v-for="item in search.location" :key="item.id">
            {{item.label}}
            <i v-if="item.children" class="el-icon-right"/>
          </span>
        </span>
      </div>
      <slot/>
      <div class="title-box">
        <el-input placeholder="请输入设备名称/编号搜索" v-model="search.text" size="small" class="search" clearable>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <span class="hint-text" >图例：</span>
        <span class="hint-icon" style="color: #00b09e">●</span>
        <span class="hint-text">在线 </span>
        <span class="hint-icon" style="color: red">●</span>
        <span class="hint-text">报警 </span>
        <span class="hint-icon" style="color: #999999">●</span>
        <span class="hint-text">离线 </span>
      </div>
    </div>
    <slot name="content"/>
    <div class="content">
      <img :src="img" height="100%" alt=""/>
    </div>
  </div>
</template>

<script>
import img from '../../assets/test/v2_qy162r.png'
export default {
  name: "device_space",
  props: {
    search: {
      type: Object,
      default: () => ({
        location: []
      }),
    }
  },
  data() {
    return {
      img: '',
    }
  },
  methods: {
    getImg() {
      this.img = img;
    }
  }
}
</script>

<style scoped>
.title-box {
  min-width: 400px;
}
.title-box-left {
  overflow: hidden;
}
.hint-text {
  font-weight: 400;
  font-size: 14px;
  color: rgb(16, 16, 16);
  font-style: normal;
  letter-spacing: 0;
  line-height: 21px;
  text-decoration: none;
}
.hint-icon {
  font-size: 50px;
  margin-top: -7px;
}
.content {
  overflow: auto;
}

</style>
